<template>
    <div>
        <el-form
        :model="ruleForm"
        status-icon
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
        >
        <el-form-item
            label="用户名"
            prop="username"
            
        >
            <el-input v-model="ruleForm.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="pass">
            <el-input
            type="password"
            v-model="ruleForm.pass"
            autocomplete="off"
            ></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="checkPass">
            <el-input
            type="password"
            v-model="ruleForm.checkPass"
            autocomplete="off"
            ></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')"
            >提交</el-button
            >
        </el-form-item>
        </el-form>
    </div>
</template>

<script>
export default {
    data() {
        var validatePass = (rule, value, callback) => {
        if (value === "") {
            callback(new Error("请输入密码"));
        } else {
            if (this.ruleForm.checkPass !== "") {
            this.$refs.ruleForm.validateField("checkPass");
            }
            callback();
        }
        };
        var validateCheckPass= (rule, value, callback) => {
        if (value === "") {
            callback(new Error("请再次输入密码"));
        } else if (value !== this.ruleForm.pass) {
            callback(new Error("两次输入密码不一致!"));
        } else {
            callback();
        }
        };
        return {
        ruleForm: {
            username: "",
            pass: "",
            checkPass: "",
        },
        rules: {
            username: [
            { required: true, message: "请输入活动名称", trigger: "blur" },
            ],
            pass: [{required: true, validator: validatePass, trigger: "blur" }],
            checkPass: [{ required: true,validator: validateCheckPass, trigger: "blur" }],
        },
        };
    },
    methods: {
        submitForm(formName) {
        this.$refs[formName].validate((valid) => {
            if (valid) {
            alert("submit!");
            console.log(this.ruleForm)
            var {username,pass} = this.ruleForm
                this.$http.post("/login",{username,pass}).then(res=>{
                    console.log(res.data.auth)
                    if(res.data.auth){
                        this.$router.push("/home")
                    }else{
                        alert(res.data.msg)
                    }
                })
            } else {
            console.log("error submit!!");
            return false;
            }
        });
        },
    },
    };
    </script>

    <style scoped>
    .el-button {
    position: absolute;
    left: 0;
}
</style>